<template>
  <div class="left">
    <item>
      <template #img><img src="@/assets/img/category/home.png" alt="" /></template>
      <template #text>首页</template>
    </item>
    <item>
      <template #img><img src="@/assets/img/category/dynamic.png" alt="" /></template>
      <template #text>动态</template>
    </item>
    <item>
      <template #img><img src="@/assets/img/category/rank.png" alt="" /></template>
      <template #text>排行榜</template>
    </item>
    <item>
      <template #img><img src="@/assets/img/category/channel.png" alt="" /></template>
      <template #text>频道</template>
    </item>
  </div>
</template>

<script>
  import Item from './Item.vue'
  export default {
    name: "left",
    components:{
      Item
    }
  }
</script>

<style scoped>
  .left{
    display: flex;
  }
  .left div{
    flex: 1;
  }
  .img{
    height: 49px;
  }
  .img img{
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }
</style>